<template><!--签订协议-->
    <div class="ex-agree">
        <div class="title"></div>
        <div class="steps">
            <span style="background-color: #09f; color: white;">签订协议</span>
            <span >填写资料</span>
            <span >审核</span>
        </div>
        <div class="infomsg" style="width: 900px">
            <div class="info">
                以下是协议内容
            </div>
            <div class="info-footer">
                <el-checkbox style="margin: 0 2px" v-model="nextBtn"></el-checkbox>
                <label-wrap>我已阅读并同意此协议</label-wrap>
                <label-wrap style="color: #d51423">(阅读并勾选，确认您已了解整个协议才能进行下一步)</label-wrap>
            </div>
            <div class="next">
                <el-button  class="next-btn" @click="toMsg" v-if="nextBtn==true" style="background-color: lightblue">下一步</el-button><br>
                <el-button  class="next-btn" @click="exit">退出申请</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "re-apply",
        data () {
            return {
                radio: '1',
                nextBtn:false,
            };
        },
      created() {
        console.log(this.sessionStorage)
      },
      methods:{
            toMsg(){

                this.$router.push({name:'Re-message'})
            },
            exit(){
                this.$router.push('/')
                window.location.reload();
            },
        }

    }
</script>

<style >
    body{
        width: 900px;
        height: 712px;
        margin: 0 auto 30px;
        background-color: #F7F7F7;
    }
    .context{
        border-radius: 0 0 8px 8px;
    }
    img{
        width: 240px;
        height: 52px;
        max-width: 100%;
        border: 0;
        position: absolute;
        top: 25px;
    }
    .title{
        height: 80px;
        line-height: 80px;
        background-color: #e4e4e4;
        border-radius: 8px 8px 0 0;
    }
    .ex-agree{
        height: 550px;
        background-color: white;
        padding-bottom: 30px;
    }
    .steps{
        background-color: white;
        width: 820px;
        padding: 0 15px;
        margin: 0 auto;
    }
    .steps span{
        display: inline-block;
        width: 270px;
        line-height: 30px;
        color: #999;
        font-size: 13px;
        margin: 30px 1px;
        background-color: #f2f2f2;
        text-align: center;
    }
    .info{
        width: 780px;
        height: 100px;
        border: 1px solid #e4e4e4;
        margin: 0 auto;
        padding: 8px 10px;
        text-align: left;
    }
    .info-footer{
        width: 760px;
        line-height: 30px;
        font-size: 14px;
        border: 1px solid #e4e4e4;
        margin: 0 auto;
        padding: 0 20px;
        text-align: left;
    }
    .next{
        height: 78px;
    }
    .next-btn{
        display: inline-block;
        width: 320px;
        line-height: 46px;
        background-color: #d51423;
        color: white;
        border-radius: 6px;
        position: relative;

        margin-top: 30px;
        padding: 0;
        border: none;
    }
</style>